<template>
  <layout
    tabbar="/pages/match/index"
    navbar="none"
    :showBack="false"
    class="dark-theme"
    navbarBackgroundColor="#020303"
  >
    <!-- 导航栏 -->
    <tn-nav-bar
      fixed
      backgroundColor="#020303"
      :isBack="false"
      fontColor="#FFFFFF">
      <view class="nav-title">
        在线匹配
      </view>
    </tn-nav-bar>

    <view class="container" :style="{paddingTop: vuex_status_bar_height + 44 + 'px' }">
      <!-- 顶部统计信息 -->
      <view class="stats-section">
        <view class="stat-card">
          <view class="stat-icon">
            <text class="tn-icon-team-fill"></text>
          </view>
          <view class="stat-content">
            <view class="stat-number">{{ onlineCount }}</view>
            <view class="stat-label">人正在匹配</view>
          </view>
        </view>

        <view class="stat-card">
          <view class="stat-icon">
            <text class="tn-icon-time-fill"></text>
          </view>
          <view class="stat-content">
            <view class="stat-number" v-if="!isMatching">{{ calculatedEstimatedTime }}分钟</view>
            <view class="stat-number countdown" v-else>{{ formattedCountdown }}</view>
            <view class="stat-label">{{ isMatching ? '剩余时间' : '预计匹配时间' }}</view>
          </view>
        </view>
      </view>

      <!-- 自己的排位提示 -->
      <view class="my-rank-tip" v-if="isMatching && myRank > 0">
        <view class="rank-icon">
          <text class="tn-icon-vip-fill"></text>
        </view>
        <text class="rank-text">您当前排在第 <text class="rank-number">{{ myRank }}</text> 位</text>
      </view>

      <!-- 匹配中的用户列表 -->
      <view class="matching-section">
        <view class="section-title">
          <text class="title-text">匹配中</text>
          <view class="title-decoration"></view>
        </view>

        <scroll-view
          scroll-y
          class="matching-list"
          :style="{height: isMatching ? `calc(100vh - ${vuex_status_bar_height + 44 + 390}px)` : `calc(100vh - ${vuex_status_bar_height + 44 + 300}px)`}"
        >
          <view
            v-for="(user, index) in displayUsers"
            :key="user.id"
            class="matching-item"
            :class="{'my-item': user.isMe}"
          >
            <view class="matching-avatar-wrapper">
              <image
                :src="user.avatar"
                class="matching-avatar"
                mode="aspectFill"
              ></image>
              <view class="matching-status">
                <view class="status-dot"></view>
              </view>
            </view>

            <view class="matching-info">
              <view class="matching-user-name">
                <!-- VIP标识 -->
                <view class="vip-badge" v-if="user.isVip">
                  <view class="tn-icon-vip-fill"></view>
                  <text class="vip-text">VIP</text>
                </view>
                <text :class="{'username-vip': user.isVip}">{{ user.username }}</text>
                <text :class="['gender-tag', user.gender === 'male' ? 'gender-male' : 'gender-female']">
                  <text :class="user.gender === 'male' ? 'tn-icon-sex-male' : 'tn-icon-sex-female'"></text>
                  {{ user.age }}
                </text>
              </view>
              <view class="matching-time">
                <text class="time-label">开始时间：</text>
                <text class="time-value">{{ user.startTime }}</text>
              </view>
            </view>

            <view class="matching-duration">
              <text class="duration-text">{{ user.duration }}</text>
            </view>
          </view>
        </scroll-view>

        <!-- 匹配按钮 -->
        <view class="match-button-wrapper">
          <view
            class="match-button"
            :class="{ 'matching-active': isMatching }"
            @tap="toggleMatching"
          >
            <view class="button-content">
              <text class="button-icon" v-if="!isMatching">
                <text class="tn-icon-like-fill"></text>
              </text>
            <view class="button-spinner" v-if="isMatching">
              <view class="spinner"></view>
            </view>
            <text class="button-text">{{ isMatching ? '已匹配 ' + myMatchingDuration : '开始匹配' }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 资料完善引导组件 -->
    <profile-guide />

    <!-- VIP弹窗组件 -->
    <vip-popup
      :show.sync="isVipModalVisible"
      :userInfo="userInfo"
      @purchase-success="onVipPurchaseSuccess"
    ></vip-popup>
  </layout>
</template>

<script>
import { getRandomUsers } from '@/api/user/index.js'
import { startMatch, executeMatch, quitMatch } from '@/api/match/index.js'
import ProfileGuide from '@/components/ProfileGuide.vue'
import VipPopup from '@/components/vip/vip-popup.vue'

export default {
  components: {
    ProfileGuide,
    VipPopup
  },
  data() {
    return {
      onlineCount: 0, // 正在匹配的人数
      estimatedTime: 0, // 预计匹配时间（分钟）
      isMatching: false, // 是否正在匹配
      matchingUsers: [], // 匹配中的用户列表
      timer: null, // 定时器
      durationTimer: null, // 持续时间更新定时器
      myRank: 0, // 自己的排位
      rankTimer: null, // 排位更新定时器
      countdownSeconds: 0, // 倒计时剩余秒数
      countdownTimer: null, // 倒计时定时器
      firstUserRemoveTimer: null, // 第一位用户移除定时器
      myStartTime: null, // 自己开始匹配的时间
      myMatchingDuration: '0秒', // 自己的匹配时长（实时更新）
      matchRecordId: null, // 当前匹配记录ID
      matchCheckTimer: null, // 匹配检查定时器
      isFirstLoad: true, // 是否首次加载
      isVipModalVisible: false, // 是否显示VIP弹窗
      firstRankMatchTimer: null, // 排到第1名后的匹配延迟定时器
    }
  },
  computed: {
    // 格式化倒计时显示（分:秒）
    formattedCountdown() {
      const minutes = Math.floor(this.countdownSeconds / 60)
      const seconds = this.countdownSeconds % 60
      return `${minutes}:${String(seconds).padStart(2, '0')}`
    },
    // 动态计算预计匹配时间（根据第一位用户的等待时长）
    calculatedEstimatedTime() {
      if (this.matchingUsers.length === 0) {
        return 3 // 默认3分钟
      }
      // 获取第一位用户（等待最久的）
      const firstUser = this.matchingUsers[0]
      if (!firstUser) {
        return 3
      }
      // 计算第一位用户已经等待了多久（分钟）
      const now = Date.now()
      const waitingSeconds = Math.floor((now - firstUser.startTimestamp) / 1000)
      const waitingMinutes = Math.ceil(waitingSeconds / 60) // 向上取整
      // 预计时间就是第一位用户的等待时长
      return Math.max(1, waitingMinutes) // 最少显示1分钟
    },
    // 获取当前用户信息
    userInfo() {
      const userState = this.$store.state.user || {}
      const userInfo = userState.userInfo || {}
      return userInfo
    },
    // 显示的用户列表（前10个，如果自己在前10则包含自己）
    displayUsers() {
      let users = [...this.matchingUsers].slice(0, 10) // 只取前10个

      // 如果正在匹配且排名在前10
      if (this.isMatching && this.myRank > 0 && this.myRank <= 10) {
        // 创建自己的用户对象（使用真实用户信息）
        const currentUser = this.userInfo

        // 获取头像：优先使用avatar，如果为空则使用相册第一张图片
        let myAvatar = currentUser?.avatar || ''
        if (!myAvatar && currentUser?.albums && currentUser.albums.length > 0) {
          myAvatar = currentUser.albums[0].imageUrl
        }
        if (!myAvatar) {
          myAvatar = 'https://cdn.uviewui.com/uview/album/1.jpg'
        }

        const myUser = {
          id: 'me',
          username: currentUser?.nickname || currentUser?.mobile || '我',
          avatar: myAvatar,
          gender: currentUser?.sex === 1 ? 'male' : 'female',
          age: currentUser?.age || Math.floor(Math.random() * 15) + 18,
          isVip: currentUser?.vip || false,
          isMe: true, // 标记是自己
          startTime: this.formatTime(this.myStartTime),
          startTimestamp: this.myStartTime.getTime(),
          duration: this.calculateDuration(this.myStartTime),
        }

        // 将自己插入到对应的排名位置（myRank-1是索引）
        users.splice(this.myRank - 1, 0, myUser)

        // 确保总数不超过10个，移除最后一个
        if (users.length > 10) {
          users.pop()
        }
      }

      return users
    }
  },
  onLoad() {
    this.isFirstLoad = true
    this.initData()
    this.startAutoRefresh()
  },
  onUnload() {
    this.clearTimers()
    // 页面卸载时，如果正在匹配，退出匹配
    if (this.isMatching && this.matchRecordId) {
      this.handleQuitMatch()
    }
  },
  onHide() {
    this.clearTimers()
    // 页面隐藏时（切换tab等），如果正在匹配，退出匹配
    if (this.isMatching && this.matchRecordId) {
      this.handleQuitMatch()
    }
  },
  onShow() {
    // 如果是首次加载，跳过（避免和onLoad重复）
    if (this.isFirstLoad) {
      this.isFirstLoad = false
      return
    }
    
    // 非首次加载时，重新初始化数据
    // 避免排队时间显示错误
    this.clearTimers()
    this.initData()
    this.startAutoRefresh()
  },
  methods: {
    // 初始化数据
    initData() {
      // 生成随机在线人数 (1800-2200之间，平均2000人)
      this.onlineCount = Math.floor(Math.random() * 401) + 1800

      // 生成匹配中的用户列表
      this.generateMatchingUsers()

      // estimatedTime 现在通过 calculatedEstimatedTime 计算属性动态计算
    },

    // 生成匹配中的用户列表
    async generateMatchingUsers() {
      try {
        const userCount = Math.floor(Math.random() * 5) + 8 // 8-12个用户

        // 从后端获取随机用户
        const randomUsers = await getRandomUsers(userCount) || []
        console.log('获取到的随机用户数据:', randomUsers)

        // 过滤掉没有昵称或头像的用户
        const validUsers = randomUsers.filter(user => user.nickname && user.avatar)
        console.log('过滤后的有效用户数据:', validUsers)

        // 如果有效用户不足，调用备用方案
        if (validUsers.length === 0) {
          console.warn('没有有效的用户数据，使用默认数据')
          this.generateMatchingUsersWithDefaultData()
          return
        }

        // 第一个用户的预计等待时间在3-5分钟之间
        const firstUserMinutes = Math.floor(Math.random() * 3) + 3 // 3-5分钟
        const firstUserTotalSeconds = firstUserMinutes * 60

        // 第一个用户还差3-10秒就匹配成功
        const remainingSeconds = Math.floor(Math.random() * 8) + 3 // 3-10秒

        // 第一个用户实际已等待时间 = 总时间 - 剩余时间
        const firstUserWaitedSeconds = firstUserTotalSeconds - remainingSeconds

        const users = []
        const usedIds = new Set() // 用于去重

        for (let i = 0; i < validUsers.length; i++) {
          const randomUser = validUsers[i]

          // 检查ID是否重复，如果重复则跳过
          if (usedIds.has(randomUser.id)) {
            console.warn('跳过重复的用户ID:', randomUser.id)
            continue
          }
          usedIds.add(randomUser.id)

          let secondsAgo
          if (i === 0) {
            // 第一个用户（排队最久的）已等待的时间
            secondsAgo = firstUserWaitedSeconds
          } else {
            // 其他用户的等待时间在 30秒 到 第一个用户已等待的时间 之间
            const maxSeconds = Math.max(30, firstUserWaitedSeconds - 10)
            secondsAgo = Math.floor(Math.random() * (maxSeconds - 30)) + 30
          }

          const startDate = new Date(Date.now() - secondsAgo * 1000)

          users.push({
            id: randomUser.id,
            username: randomUser.nickname || '神秘用户',
            avatar: randomUser.avatar || 'https://cdn.uviewui.com/uview/album/1.jpg',
            gender: randomUser.sex === 1 ? 'male' : 'female',
            age: Math.floor(Math.random() * 15) + 18, // 随机年龄18-32岁
            isVip: Math.random() > 0.5, // 50%概率显示VIP，营造氛围
            startTime: this.formatTime(startDate),
            startTimestamp: startDate.getTime(),
            duration: this.calculateDuration(startDate),
          })
        }

        // 按开始时间正序排列（最早的在前面）
        users.sort((a, b) => a.startTimestamp - b.startTimestamp)

        this.matchingUsers = users
        console.log('生成的匹配用户列表:', this.matchingUsers)

        // 设置定时器，在剩余时间后移除第一个用户
        this.scheduleFirstUserRemoval(remainingSeconds * 1000)
      } catch (error) {
        console.error('获取随机用户失败', error)
        // 失败时使用默认头像
        this.generateMatchingUsersWithDefaultData()
      }
    },

    // 使用默认数据生成用户列表（备用方案）
    generateMatchingUsersWithDefaultData() {
      const users = []
      const userCount = Math.floor(Math.random() * 5) + 8 // 8-12个用户

      const maleNames = ['阳光男孩', '帅气小哥', '温柔绅士', '运动达人', '音乐才子', '游戏大神', '暖男一枚', '型男酷盖']
      const femaleNames = ['甜美少女', '气质女神', '可爱公主', '活力girl', '温柔小姐姐', '元气少女', '优雅女士', '萌萌小仙女']
      const avatars = [
        'https://cdn.uviewui.com/uview/album/1.jpg',
        'https://cdn.uviewui.com/uview/album/2.jpg',
        'https://cdn.uviewui.com/uview/album/3.jpg',
        'https://cdn.uviewui.com/uview/album/4.jpg',
        'https://cdn.uviewui.com/uview/album/5.jpg',
        'https://cdn.uviewui.com/uview/album/6.jpg',
        'https://cdn.uviewui.com/uview/album/7.jpg',
        'https://cdn.uviewui.com/uview/album/8.jpg',
      ]

      // 第一个用户的预计等待时间在3-5分钟之间
      const firstUserMinutes = Math.floor(Math.random() * 3) + 3
      const firstUserTotalSeconds = firstUserMinutes * 60
      const remainingSeconds = Math.floor(Math.random() * 8) + 3
      const firstUserWaitedSeconds = firstUserTotalSeconds - remainingSeconds

      for (let i = 0; i < userCount; i++) {
        const gender = Math.random() > 0.5 ? 'male' : 'female'
        const names = gender === 'male' ? maleNames : femaleNames
        const age = Math.floor(Math.random() * 15) + 18

        let secondsAgo
        if (i === 0) {
          secondsAgo = firstUserWaitedSeconds
        } else {
          const maxSeconds = Math.max(30, firstUserWaitedSeconds - 10)
          secondsAgo = Math.floor(Math.random() * (maxSeconds - 30)) + 30
        }

        const startDate = new Date(Date.now() - secondsAgo * 1000)

        users.push({
          id: i + 1,
          username: names[Math.floor(Math.random() * names.length)] + (1000 + i),
          avatar: avatars[Math.floor(Math.random() * avatars.length)],
          gender: gender,
          age: age,
          isVip: Math.random() > 0.7,
          startTime: this.formatTime(startDate),
          startTimestamp: startDate.getTime(),
          duration: this.calculateDuration(startDate),
        })
      }

      users.sort((a, b) => a.startTimestamp - b.startTimestamp)
      this.matchingUsers = users
      this.scheduleFirstUserRemoval(remainingSeconds * 1000)
    },

    // 安排移除第一位用户
    scheduleFirstUserRemoval(delayMs) {
      // 清除之前的定时器
      if (this.firstUserRemoveTimer) {
        clearTimeout(this.firstUserRemoveTimer)
      }

      // 设置新的定时器
      this.firstUserRemoveTimer = setTimeout(() => {
        if (this.matchingUsers.length > 0) {
          // 移除第一位用户（模拟匹配成功）
          this.matchingUsers.shift()

          // 如果自己正在匹配且排名在前10，排名上升1位
          if (this.isMatching && this.myRank > 0 && this.myRank <= 10) {
            this.myRank = Math.max(1, this.myRank - 1)

            // 检查是否排到第1名
            if (this.myRank === 1 && !this.firstRankMatchTimer) {
              // 排到第1名，延迟2-5秒后触发强制匹配
              const delay = Math.floor(Math.random() * 4) + 2 // 2-5秒
              console.log(`排到第1名，${delay}秒后触发匹配`)

              this.firstRankMatchTimer = setTimeout(() => {
                this.matchSuccess(true) // 强制匹配
              }, delay * 1000)
            }
          }

          // 如果还有用户，继续安排下一次移除
          if (this.matchingUsers.length > 0) {
            // 下一个用户在10-20秒后匹配成功
            const nextDelay = (Math.floor(Math.random() * 11) + 10) * 1000
            this.scheduleFirstUserRemoval(nextDelay)
          }
        }
      }, delayMs)
    },

    // 格式化时间（时:分:秒）
    formatTime(date) {
      const hour = String(date.getHours()).padStart(2, '0')
      const minute = String(date.getMinutes()).padStart(2, '0')
      const second = String(date.getSeconds()).padStart(2, '0')
      return `${hour}:${minute}:${second}`
    },

    // 计算持续时间
    calculateDuration(startDate) {
      const now = Date.now()
      const diff = now - startDate.getTime()
      const minutes = Math.floor(diff / 60000)
      const seconds = Math.floor((diff % 60000) / 1000)

      if (minutes > 0) {
        return `${minutes}分${seconds}秒`
      } else {
        return `${seconds}秒`
      }
    },


    // 更新所有用户的持续时间
    updateDurations() {
      this.matchingUsers.forEach(user => {
        user.duration = this.calculateDuration(new Date(user.startTimestamp))
      })

      // 同时更新自己的匹配时长
      if (this.isMatching && this.myStartTime) {
        this.myMatchingDuration = this.calculateDuration(this.myStartTime)
      }
    },

    // 开始自动刷新
    startAutoRefresh() {
      // 每3-5秒更新在线人数和用户列表
      this.timer = setInterval(() => {
        // 在线人数小幅波动
        const change = Math.floor(Math.random() * 40) - 20
        this.onlineCount = Math.max(1500, Math.min(2500, this.onlineCount + change))

        // 预计时间现在通过计算属性动态计算，不需要手动调整

        // 随机添加新用户或移除旧用户
        if (Math.random() > 0.5 && this.matchingUsers.length < 15) {
          this.addNewMatchingUser()
        } else if (Math.random() > 0.7 && this.matchingUsers.length > 5) {
          this.removeOldMatchingUser()
        }
      }, Math.random() * 2000 + 3000) // 3-5秒

      // 每秒更新持续时间
      this.durationTimer = setInterval(() => {
        this.updateDurations()
      }, 1000)
    },

    // 添加新的匹配用户
    async addNewMatchingUser() {
      try {
        // 从后端获取1个随机用户
        const randomUsers = await getRandomUsers(1) || []

        if (randomUsers.length > 0) {
          const randomUser = randomUsers[0]

          // 检查是否已经存在该用户（去重）
          const exists = this.matchingUsers.some(user => user.id === randomUser.id)
          if (exists) {
            console.warn('用户已存在，跳过添加:', randomUser.id)
            return
          }

          // 新用户刚刚加入（30秒-2分钟之间）
          const secondsAgo = Math.floor(Math.random() * 90) + 30 // 30秒-2分钟
          const startDate = new Date(Date.now() - secondsAgo * 1000)

          const newUser = {
            id: randomUser.id,
            username: randomUser.nickname || '神秘用户',
            avatar: randomUser.avatar || 'https://cdn.uviewui.com/uview/album/1.jpg',
            gender: randomUser.sex === 1 ? 'male' : 'female',
            age: Math.floor(Math.random() * 15) + 18, // 随机年龄18-32岁
            isVip: Math.random() > 0.5, // 50%概率显示VIP，营造氛围
            startTime: this.formatTime(startDate),
            startTimestamp: startDate.getTime(),
            duration: this.calculateDuration(startDate),
          }

          this.matchingUsers.push(newUser)
          // 重新排序，保持从早到晚的顺序
          this.matchingUsers.sort((a, b) => a.startTimestamp - b.startTimestamp)
        }
      } catch (error) {
        console.error('添加新用户失败', error)
        // 失败时使用默认数据
        this.addNewMatchingUserWithDefaultData()
      }
    },

    // 使用默认数据添加新用户（备用方案）
    addNewMatchingUserWithDefaultData() {
      const gender = Math.random() > 0.5 ? 'male' : 'female'
      const maleNames = ['阳光男孩', '帅气小哥', '温柔绅士', '运动达人']
      const femaleNames = ['甜美少女', '气质女神', '可爱公主', '活力girl']
      const names = gender === 'male' ? maleNames : femaleNames
      const avatars = [
        'https://cdn.uviewui.com/uview/album/1.jpg',
        'https://cdn.uviewui.com/uview/album/2.jpg',
        'https://cdn.uviewui.com/uview/album/3.jpg',
      ]

      const secondsAgo = Math.floor(Math.random() * 90) + 30
      const startDate = new Date(Date.now() - secondsAgo * 1000)

      const newUser = {
        id: Date.now(),
        username: names[Math.floor(Math.random() * names.length)] + Math.floor(Math.random() * 9000 + 1000),
        avatar: avatars[Math.floor(Math.random() * avatars.length)],
        gender: gender,
        age: Math.floor(Math.random() * 15) + 18,
        isVip: Math.random() > 0.5, // 50%概率显示VIP，营造氛围
        startTime: this.formatTime(startDate),
        startTimestamp: startDate.getTime(),
        duration: this.calculateDuration(startDate),
      }

      this.matchingUsers.push(newUser)
      this.matchingUsers.sort((a, b) => a.startTimestamp - b.startTimestamp)
    },

    // 移除旧的匹配用户
    removeOldMatchingUser() {
      // 移除列表中随机一个用户（模拟有人匹配成功）
      const randomIndex = Math.floor(Math.random() * this.matchingUsers.length)
      this.matchingUsers.splice(randomIndex, 1)
    },

    // 清除定时器
    clearTimers() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
      if (this.durationTimer) {
        clearInterval(this.durationTimer)
        this.durationTimer = null
      }
      if (this.firstUserRemoveTimer) {
        clearTimeout(this.firstUserRemoveTimer)
        this.firstUserRemoveTimer = null
      }
      this.stopRankUpdate()
      this.stopCountdown()
      this.stopMatchCheck()
    },

    // 切换匹配状态
    async toggleMatching() {
      if (!this.isMatching) {
        // 准备开始匹配，先检查资料完整度
        const isProfileComplete = await this.$store.dispatch('user/forceCheckProfileCompleteness')

        if (!isProfileComplete) {
          // 资料不完整，会自动引导用户完善资料
          console.log('资料不完整，请先完善资料')
          return
        }
      }

      this.isMatching = !this.isMatching

      if (this.isMatching) {
        try {
          // 调用后端开始匹配接口
          const recordId = await startMatch()
          this.matchRecordId = recordId

          // 随机生成倒计时时间（3-5分钟，转换为秒）
          const randomMinutes = Math.floor(Math.random() * 3) + 3 // 3-5分钟
          this.countdownSeconds = randomMinutes * 60

          // 随机生成初始排位（100-200之间）
          this.myRank = Math.floor(Math.random() * 101) + 100 // 100-200之间

          // 记录自己开始匹配的时间
          this.myStartTime = new Date()
          this.myMatchingDuration = '0秒'

          // 显示重要提示
          uni.showModal({
            title: '温馨提示',
            content: '匹配已开始，请不要离开当前页面，否则将退出匹配队列，需要重新排队',
            showCancel: false,
            confirmText: '我知道了'
          })

          // 启动倒计时
          this.startCountdown()

          // 启动排位更新定时器，每2-4秒排位前进
          this.startRankUpdate()

          // 启动匹配检查定时器，每3秒检查一次是否有真实匹配
          this.startMatchCheck()
        } catch (error) {
          console.error('开始匹配失败', error)
          this.isMatching = false

          // 检查是否是每日限制错误（错误码：1004016003）
          if (error && error.code === 1004016003) {
            // 先显示确认提示框
            uni.showModal({
              title: '匹配次数限制',
              content: error.msg || '今日匹配次数已达上限，开通会员享受无限匹配',
              confirmText: '开通会员',
              cancelText: '我知道了',
              success: (res) => {
                if (res.confirm) {
                  // 用户点击开通会员，显示VIP弹窗
                  this.isVipModalVisible = true
                }
              }
            })
          } else if (error && error.code === 1004016002) {
            // 封号错误
            uni.showToast({
              title: error.msg || '您的账号已被封禁',
              icon: 'none',
              duration: 3000
            })
          } else {
            uni.showToast({
              title: error.msg || '开始匹配失败',
              icon: 'none'
            })
          }
        }
      } else {
        // 停止匹配
        try {
          // 调用后端退出匹配接口
          await quitMatch()
        } catch (error) {
          console.error('退出匹配失败', error)
        }

        this.stopCountdown()
        this.stopRankUpdate()
        this.stopMatchCheck()
        this.resetMatchState()
      }
    },

    // 开始倒计时
    startCountdown() {
      this.countdownTimer = setInterval(() => {
        if (this.countdownSeconds > 0) {
          this.countdownSeconds--
        } else {
          // 倒计时结束，不立即触发匹配
          // 等待排到第1名时才触发
          this.stopCountdown()
        }
      }, 1000) // 每秒减1
    },

    // 开始匹配检查（每3秒检查一次真实匹配）
    startMatchCheck() {
      this.matchCheckTimer = setInterval(async () => {
        if (!this.isMatching || !this.matchRecordId) {
          return
        }

        try {
          // 尝试真实匹配（不强制）
          const matchResult = await executeMatch({
            id: this.matchRecordId,
            forceMatch: false
          })

          // 如果找到了真实匹配
          if (matchResult.success && matchResult.matchedUserId) {
            console.log('真实匹配成功！', matchResult)
            this.stopMatchCheck()
            this.stopCountdown()
            this.stopRankUpdate()
            this.handleMatchSuccess(matchResult)
          }
        } catch (error) {
          console.error('检查匹配失败', error)
        }
      }, 3000) // 每3秒检查一次
    },

    // 停止匹配检查
    stopMatchCheck() {
      if (this.matchCheckTimer) {
        clearInterval(this.matchCheckTimer)
        this.matchCheckTimer = null
      }
    },

    // 停止倒计时
    stopCountdown() {
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer)
        this.countdownTimer = null
      }
    },

    // 开始排位更新
    startRankUpdate() {
      this.rankTimer = setInterval(() => {
        // 只有排名在10名之后才能自动快速前进
        if (this.myRank > 10) {
          // 每次排位前进1-3位
          const advance = Math.floor(Math.random() * 3) + 1
          this.myRank = Math.max(10, this.myRank - advance)
        }
        // 排名在前10时，由列表中用户匹配成功来推动排名前进

        // 检查是否排到第1名
        if (this.myRank === 1 && !this.firstRankMatchTimer) {
          // 排到第1名，延迟2-5秒后触发强制匹配
          const delay = Math.floor(Math.random() * 4) + 2 // 2-5秒
          console.log(`排到第1名，${delay}秒后触发匹配`)

          this.firstRankMatchTimer = setTimeout(() => {
            this.matchSuccess(true) // 强制匹配
          }, delay * 1000)
        }
      }, Math.random() * 2000 + 2000) // 2-4秒更新一次
    },

    // 停止排位更新
    stopRankUpdate() {
      if (this.rankTimer) {
        clearInterval(this.rankTimer)
        this.rankTimer = null
      }
      if (this.firstRankMatchTimer) {
        clearTimeout(this.firstRankMatchTimer)
        this.firstRankMatchTimer = null
      }
    },

    // 匹配成功（倒计时结束或真实匹配成功）
    async matchSuccess(forceMatch = false) {
      try {
        // 调用后端执行匹配接口
        if (this.matchRecordId) {
          const matchResult = await executeMatch({
            id: this.matchRecordId,
            forceMatch: forceMatch // 是否强制匹配（包含随机）
          })

          console.log('匹配结果:', matchResult)

          if (matchResult.success) {
            this.handleMatchSuccess(matchResult)
          }
        }
      } catch (error) {
        console.error('执行匹配失败', error)

        uni.showToast({
          title: error.msg || '匹配失败，请重试',
          icon: 'none'
        })

        // 重置状态
        this.resetMatchState()
      }
    },

    // 处理匹配成功
    handleMatchSuccess(matchResult) {
      this.isMatching = false
      this.stopRankUpdate()
      this.stopCountdown()
      this.stopMatchCheck()

      // 直接使用后端返回的用户信息
      const matchedUser = {
        id: matchResult.matchedUserId,
        username: matchResult.matchedUserNickname || '神秘用户',
        avatar: matchResult.matchedUserAvatar || 'https://cdn.uviewui.com/uview/album/1.jpg'
      }

      // 显示匹配类型提示
      if (matchResult.isRealMatch) {
        console.log('真实匹配成功！')
      } else {
        console.log('随机匹配成功！')
      }

      // 重置状态
      this.resetMatchState()

      uni.showModal({
        title: '匹配成功！',
        content: `已为您匹配到 ${matchedUser.username}`,
        confirmText: '开始聊天',
        cancelText: '稍后',
        success: (res) => {
          if (res.confirm) {
            // 资料完整度已在开始匹配时检查过，直接跳转
            uni.navigateTo({
              url: `/pages/chat/index?id=${matchedUser.id}`
            })
          }
        }
      })
    },

    // 重置匹配状态
    resetMatchState() {
      this.myRank = 0
      this.countdownSeconds = 0
      this.myStartTime = null
      this.myMatchingDuration = '0秒'
      this.matchRecordId = null
    },

    // 处理退出匹配（用于页面离开时调用）
    async handleQuitMatch() {
      try {
        await quitMatch()
        this.isMatching = false
        this.resetMatchState()
      } catch (error) {
        console.error('退出匹配失败', error)
      }
    },

    // VIP购买成功回调
    onVipPurchaseSuccess() {
      console.log('VIP购买成功')
      // 刷新用户信息
      this.$store.dispatch('user/getUserInfo')
      // 可以继续匹配
      uni.showToast({
        title: '开通成功！',
        icon: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #020303;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #e0e0e0;
  position: relative;
  text-align: center;
  height: 70rpx;

  &::after {
    content: '';
    position: absolute;
    bottom: -10rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 40rpx;
    height: 4rpx;
    background: linear-gradient(90deg, #8eac21, #B3F73C);
    border-radius: 2rpx;
  }
}

// 统计信息区域
.stats-section {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  gap: 20rpx;
}

.stat-card {
  flex: 1;
  background: linear-gradient(135deg, rgba(179, 247, 60, 0.08), rgba(142, 172, 33, 0.05));
  border-radius: 24rpx;
  padding: 30rpx 20rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  border: 1px solid rgba(179, 247, 60, 0.15);
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
}

.stat-icon {
  width: 80rpx;
  height: 80rpx;
  background: linear-gradient(135deg, #B3F73C, #8eac21);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  color: #020303;
  flex-shrink: 0;
}

.stat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.stat-number {
  font-size: 40rpx;
  font-weight: bold;
  color: #B3F73C;
  line-height: 1;

  &.countdown {
    font-family: 'Courier New', monospace;
    letter-spacing: 2rpx;
  }
}

.stat-label {
  font-size: 24rpx;
  color: #999999;
}

// 匹配中区域
.matching-section {
  padding: 0 30rpx;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  gap: 16rpx;
}

// 自己的排位提示
.my-rank-tip {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 20rpx 24rpx;
  margin: 0 30rpx 20rpx 30rpx;
  background: linear-gradient(135deg, rgba(179, 247, 60, 0.15), rgba(142, 172, 33, 0.08));
  border-radius: 16rpx;
  border: 2rpx solid rgba(179, 247, 60, 0.3);
  animation: rank-pulse 2s ease-in-out infinite;
}

@keyframes rank-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(179, 247, 60, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8rpx rgba(179, 247, 60, 0);
  }
}

.rank-icon {
  width: 48rpx;
  height: 48rpx;
  background: linear-gradient(135deg, #B3F73C, #8eac21);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #020303;
  flex-shrink: 0;
}

.rank-text {
  font-size: 28rpx;
  color: #e0e0e0;
  flex: 1;
}

.rank-number {
  font-size: 32rpx;
  font-weight: bold;
  color: #B3F73C;
}

.title-text {
  font-size: 32rpx;
  font-weight: 700;
  color: #e0e0e0;
}

.title-decoration {
  flex: 1;
  height: 2rpx;
  background: linear-gradient(90deg, rgba(179, 247, 60, 0.3), transparent);
}

.matching-list {
  width: 100%;
}

.matching-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s;

  &:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.08);
  }

  // 自己的卡片样式
  &.my-item {
    background: linear-gradient(135deg, rgba(179, 247, 60, 0.15), rgba(142, 172, 33, 0.08));
    border: 2rpx solid rgba(179, 247, 60, 0.4);
    box-shadow: 0 0 20rpx rgba(179, 247, 60, 0.2);
    position: relative;

    &::before {
      content: '我';
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      background: linear-gradient(135deg, #B3F73C, #8eac21);
      color: #020303;
      font-size: 20rpx;
      font-weight: bold;
      padding: 4rpx 12rpx;
      border-radius: 20rpx;
    }
  }
}

.matching-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}

.matching-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  border: 3rpx solid rgba(179, 247, 60, 0.3);
}

.matching-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28rpx;
  height: 28rpx;
  background: #020303;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-dot {
  width: 18rpx;
  height: 18rpx;
  background: #B3F73C;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.9);
  }
}

.matching-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.matching-user-name {
  display: flex;
  align-items: center;
  gap: 12rpx;
  font-size: 30rpx;
  color: #e0e0e0;
  font-weight: 600;
  flex-wrap: wrap;
}

.vip-badge {
  height: 32rpx;
  padding: 0 10rpx;
  background: linear-gradient(90deg, #FFD700, #FFA500);
  border-radius: 16rpx;
  display: flex;
  align-items: center;

  .tn-icon-vip-fill {
    font-size: 24rpx;
    color: #FFFFFF;
    margin-right: 4rpx;
  }

  .vip-text {
    font-size: 20rpx;
    color: #FFFFFF;
    font-weight: bold;
  }
}

.username-vip {
  color: #B3F73C;
}

.gender-tag {
  display: inline-flex;
  align-items: center;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  gap: 4rpx;

  &.gender-male {
    background: rgba(64, 158, 255, 0.15);
    color: #409EFF;
  }

  &.gender-female {
    background: rgba(255, 105, 180, 0.15);
    color: #FF69B4;
  }
}

.matching-time {
  font-size: 24rpx;
  color: #999999;
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.time-label {
  color: #666666;
}

.time-value {
  color: #999999;
}

.matching-duration {
  flex-shrink: 0;
  padding: 8rpx 16rpx;
  background: rgba(179, 247, 60, 0.1);
  border-radius: 12rpx;
  border: 1px solid rgba(179, 247, 60, 0.2);
}

.duration-text {
  font-size: 24rpx;
  color: #B3F73C;
  font-weight: 600;
}

// 匹配按钮
.match-button-wrapper {
  padding: 30rpx 0;
}

.match-button {
  width: 100%;
  height: 100rpx;
  background: linear-gradient(135deg, #B3F73C, #8eac21);
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 20rpx rgba(179, 247, 60, 0.3);
  transition: all 0.3s;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 10rpx rgba(179, 247, 60, 0.2);
  }

  &.matching-active {
    background: linear-gradient(135deg, #8eac21, #B3F73C);
    animation: pulse-button 2s infinite;
  }
}

@keyframes pulse-button {
  0%, 100% {
    box-shadow: 0 8rpx 20rpx rgba(179, 247, 60, 0.3);
  }
  50% {
    box-shadow: 0 8rpx 30rpx rgba(179, 247, 60, 0.5);
  }
}

.button-content {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.button-icon {
  font-size: 44rpx;
  color: #020303;
}

.button-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #020303;
}

.button-spinner {
  width: 40rpx;
  height: 40rpx;
}

.spinner {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid rgba(2, 3, 3, 0.2);
  border-top-color: #020303;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>

